<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>


    <input type="text" id="a">
    <select name="" id="sel">
        <option value="+">+</option>
        <option value="-">-</option>
        <option value="*">*</option>
        <option value="/">/</option>
    </select>
    <input type="text" id="b">
    <button id="btn">=</button>
    <input type="text" id="c">

    <script>


        // 注意：
        //   封装函数不是简单的把代码套起来
        //   注意函数是实现一个具体的小功能 --- 此功能尽量可以重复利用
    
        // function calc() {
            
        //     // 拿对象
        //     var oInp1 = document.getElementById('a') ;
        //     var oInp2 = document.getElementById('b') ;
        //     var oSel = document.getElementById('sel') ;
        //     var oBtn = document.getElementById('btn') ;
        //     var oRes = document.getElementById('c') ;

        //     // 事件
        //     //   事件驱动型函数  --- 没有名字的函数，只会在触发事件以后才会被调用
        //     oBtn.onclick = function() {
        //         var a = oInp1.value * 1 ;
        //         var b = oInp2.value * 1 ;
        //         var f = oSel.value ;
        //         var res ;
        //         switch (f) {
        //             case '+': oRes.value = a + b; break ;
        //             case '-': oRes.value = a - b;break ;
        //             case '*': oRes.value = a * b;break ;
        //             case '/': oRes.value = a / b;
        //         }
        //     }
        // }


        calc()





    </script>

</body>

</html>